<template>
	<view>
		<view class="lan_text bold textcenter" style="padding-top: 180rpx; font-size: 60rpx;">验证码登录</view>
		<input type="password" style='width:0;height:0;min-height:0' />
		<input type="text" autocomplete="off" style='width:0;height:0;min-height:0' />
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="pdl">
					<input type="number" autocomplete="off" class="hei_text main_size bold" placeholder="请输入手机号码" v-model="mobile">
				</view>
				<view class="pdl margin_top6 flexbetween">
					<input type="text" autocomplete="off" class="hei_text main_size bold" placeholder="请输入验证码" v-model="yzm_code">
					<view class="xiaolan textcenter"  style="width: 180rpx;" @click="sendyzm" v-show="codetext == 1">获取验证码</view>
					<view class="xiaolan textcenter"  style="width: 180rpx;" v-show="codetext == 2">{{second}}s后重新获取</view>
					<view class="xiaolan textcenter"  style="width: 180rpx;" @click="sendyzm" v-show="codetext == 3">重新发送</view>
				</view>
			</view>
		</view>
		<view class="flexcenter margin_top" style="padding: 0 60rpx;" @click="checkaudio">
			<view class="nocheckaudio" v-show="!type"></view>
			<view class="checkaudio" v-show="type"></view>
			<view class="xiaohui margin_left1">
				阅读并同意
				<text class="xiaolan" @click.stop="jumpurl('/pages/system/system?type=1')">《用户协议》</text>
				和
				<text class="xiaolan" @click.stop="jumpurl('/pages/system/system?type=2')">《隐私政策》</text>
			</view>
		</view>
		<view class="mainpadding">
			<view class="mainpadding">
				<view class="submitbtn" @click="login()" v-if="!liandiantype">登录</view>
				<view class="submitbtn" v-if="liandiantype">登录</view>
			</view>
		</view>
		<view class="wave wave1"></view>
		<view class="wave wave2"></view>
		<view class="wave wave3"></view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				codetext: 1,
				second: 59,
				mobile: '',
				yzm_code: '',
				type: false,
				liandiantype:0
			}
		},
		methods: {
			checkaudio(){
				this.type = !this.type
			},
			login(){
				let _this = this;
				
				if(_this.mobile == ''){
					httpRequest.toast("请输入手机号码!")
					return;
				}
				if(!_this.isMobile(_this.mobile)){
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				if(this.yzm_code==""){
					httpRequest.toast("请输入验证码")
					return false
				} 
				if(!this.type){
					httpRequest.toast("请认真阅读并勾选用户协议");
					return false;
				}
				this.liandiantype = 1
				uni.showLoading({
					mask:true,
					title:"请稍候"
				})
				httpRequest.request('/api/user/mobilelogin','GET',{
					mobile:this.mobile, 
					captcha:this.yzm_code
				}).then(res => {
					if(res.code == 1){
						uni.hideLoading()
						httpRequest.toast('登录成功');
						uni.setStorageSync('token',res.data.userinfo.token);
						uni.setStorageSync('user_id',res.data.userinfo.user_id);
						uni.setStorageSync('idmm',res.data.userinfo.idmm);
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1000)
					}else{
						this.liandiantype = 0
						uni.hideLoading()
						httpRequest.toast(res.msg);
					}
				})
			},
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			//发送验证码
			sendyzm() {
				let _this = this;
				if (_this.mobile == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				if (!_this.isMobile(_this.mobile)) {
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				_this.codetext = 2;
				_this.second = 59;
				let timer = setInterval(function() {
					if (_this.second > 1) {
						_this.second--;
					} else {
						clearInterval(timer);
						_this.codetext = 3;
					}
				}, 1000)
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.mobile,
					event: 'mobilelogin',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						httpRequest.toast('发送成功')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wave {
		position: fixed;
		left: 0;
		bottom: 0px;
		width: 200%;
		height: 100px;
		background-repeat: repeat-x;
		background-position: left bottom;
		transform-origin: center bottom;
		background-size: 50% 90px;
	}

	.wave1 {
		z-index: 5;
		opacity: 1;
		animation: swave 20s linear infinite;
		background-image: url("../../static/image/system/bolang.png");
	}

	.wave2 {
		z-index: 4;
		opacity: .3;
		animation: swave 30s linear infinite;
		background-image: url("../../static/image/system/bolang.png");
	}

	.wave3 {
		z-index: 3;
		opacity: .5;
		animation: swave 45s linear infinite;
		background-image: url("../../static/image/system/bolang.png");
	}

	@keyframes swave {
		0% {
			transform: translateX(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) scaleY(.55)
		}

		100% {
			transform: translateX(-50%) scaleY(1)
		}
	}
</style>